<template>
	
	<div>
		<div class="bubble"></div>
		<div class="login">
			<div class="login-box">
				<div class="head">
					<img  src="../../assets/images/login-header.png"/>
				</div>
				<div class="form">
					<img class="profile-avatar" src="" alt="">
					<div class="content">
						<form class="el-form el-form--large el-form--label-right"></form>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	
		.dark .bubble[data-v-485191c0] {
			background: url() repeat
		}

		.dark .login .login-box[data-v-485191c0] {
			background: #161b22
		}

		.dark .login .head img[data-v-485191c0] {
			filter: brightness(61%)
		}

		.dark .login .form .submit-button[data-v-485191c0] {
			--el-button-bg-color: var(--el-color-primary-light-5);
			--el-button-border-color: rgba(240, 252, 241, .1)
		}
	.bubble{
		overflow: hidden;
		background: url(/src/assets/images/bg-very.jpg) repeat;
	}
	
	
	.login{
	    position: absolute;
	    top: 0;
	    display: flex;
	    width: 100vw;
	    height: 100vh;
	    align-items: center;
	    justify-content: center;
	}
	
	.login .login-box{
	    overflow: hidden;
	    width: 430px;
	    padding: 0;
	    background: var(--ba-bg-color-overlay);
	    margin-bottom: 80px;
	}
	
	.login .head{
	    background: #ccccff;
	}
	
	.dark .login .head img {
	    filter: brightness(61%);
	}
	
	
	.login .form .profile-avatar{
	    display: block;
	    position: absolute;
	    height: 100px;
	    width: 100px;
	    border-radius: 50%;
	    border: 4px solid var(--ba-bg-color-overlay);
	    top: -50px;
	    right: calc(50% - 50px);
	    z-index: 2;
	    user-select: none;
	}
	
	.login .form .content{
	    padding: 100px 40px 40px;
	}
	
	
</style>